<template>
    <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Row type="flex" justify="start">
            <Col span="14" offset="3">
                <!--{{this.optionState === false ? '添加' : '修改'}}-->
                <Form label-position="left" :model="formItem" :label-width="100">
                    <FormItem v-show="hidden.super_name" label="上级机构：" v-if="optionState === false">
                        <Input v-model="formItem.super_name" style="width: 70%" placeholder="必填" disabled></Input>
                    </FormItem>
                    <FormItem v-show="hidden.name" label="机构名称：">
                        <Input v-model="formItem.name" style="width: 70%" placeholder="必填"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.sys_area" label="运营商编号：">
                        <Select v-model="formItem.sys_area" style="width: 70%" disabled>
                            <Option value="LA">沈阳-居游</Option>
                        </Select>
                    </FormItem>
                    <slot v-show="hidden.slot" :row="formItem"></slot>
                    <FormItem v-show="hidden.area_id" label="归属区域：">
                        <Select v-model="formItem.area_id" style="width: 70%" filterable clearable>
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem v-show="hidden.type" label="机构类型：">
                        <Select v-model="formItem.type" style="width: 70%" disabled>
                            <Option value="1">公司</Option>
                        </Select>
                    </FormItem>
                    <FormItem v-show="hidden.grade" label="机构等级：">
                        <Select v-model="formItem.grade" style="width: 70%" disabled>
                            <Option value="1">一级</Option>
                            <Option value="2">二级</Option>
                            <Option value="3">三级</Option>
                            <Option value="4">四级</Option>
                            <Option value="5">五级</Option>
                            <Option value="6">六级</Option>
                            <Option value="7">七级</Option>
                            <Option value="8">八级</Option>
                            <Option value="9">九级</Option>
                            <Option value="10">十级</Option>
                        </Select>
                    </FormItem>
                    <FormItem v-show="hidden.useable" label="是否启用：">
                        <i-switch v-model="formItem.USEABLE" true-value="1" false-value="0" size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>
                    </FormItem>
                    <FormItem v-show="hidden.address" label="联系地址：">
                        <Input v-model="formItem.address" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.zip_code" label="邮政编码：">
                        <Input v-model="formItem.zip_code" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.phone" label="电话：">
                        <Input v-model="formItem.phone" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.fax" label="传真：">
                        <Input v-model="formItem.fax" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.email" label="邮箱：">
                        <Input v-model="formItem.email" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.master" label="负责人：">
                        <Input v-model="formItem.master" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.primary_person" label="主负责人：">
                        <Input v-model="formItem.PRIMARY_PERSON" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.deputy_person" label="副负责人：">
                        <Input v-model="formItem.DEPUTY_PERSON" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem v-show="hidden.sort" label="排序：">
                        <InputNumber :min="0" v-model="formItem.sort" style="width: 30%"></InputNumber>
                    </FormItem>
                    <FormItem v-show="hidden.remarks" label="备注信息：">
                        <Input v-model="formItem.remarks" maxlength="255" show-word-limit type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"></Input>
                    </FormItem>
                    <template v-if="optionState === false">
                        <FormItem v-show="hidden.role">
                            <Checkbox size="large" v-model="roleState">勾选之后，会自动添加同名的用户。用户初始密码:000000，请尽快修改密码。</Checkbox>
                        </FormItem>
                        <FormItem v-show="hidden.role" label="用户角色：" v-if="roleState">
                            <Tag v-for="item in roleList" size="medium" :checkable="true" :checked="false"
                                 :key="item.id"
                                 :name="item.name" @on-change="tagClick" style="cursor: pointer">{{ item.name }}
                            </Tag>
                        </FormItem>
                    </template>
                    <FormItem>
                        <Button shape="circle" type="primary" :loading="btnLoading" @click="saveOption">保存</Button>
                        <Button shape="circle" style="margin-left: 8px" @click="cancelOption">取消</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </div>
</template>

<script>
import {
  getCompanyRoleList,
  saveOffice,
  getAreaList,
  getById
} from '../../../../../api/system/system'

export default {
  name: 'companyOption',
  props: {
    companyId: {
      type: String,
      default: () => {
        return ''
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {
          USEABLE: '1'
        }
      }
    },
    optionState: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    getUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    hiddenArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      btnLoading: false,
      spinShow: false,
      cityList: [],
      roleList: [],
      roleState: false,
      formItem: {
        USEABLE: '1',
        set_user: false,
        login_flag: ''
      },
      hidden: {
        super_name: true,
        name: true,
        sys_area: true,
        slot: true,
        area_id: true,
        type: true,
        grade: true,
        useable: true,
        address: true,
        zip_code: true,
        phone: true,
        fax: true,
        email: true,
        master: true,
        primary_person: true,
        deputy_person: true,
        sort: true,
        remarks: true,
        role: true
      }
    }
  },
  mounted () {
    this.hiddenArr.forEach(item => {
      if (this.hidden.hasOwnProperty(item)) {
        this.hidden[item] = false
      }
    })
    this.getAreaList()
  },
  methods: {
    tagClick (checked, name, id) {
      this.roleList.forEach(item => {
        if (item.name === name) {
          checked === true ? item.state = true : item.state = false
        }
      })
    },
    getRoleList (data) {
      getCompanyRoleList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.roleList = data.data
        } else {
          this.error(data)
        }
      })
    },
    getAreaList () {
      getAreaList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let cityData = []
          data.data.forEach(item => {
            cityData.push({ 'value': item.id, 'label': item.name })
          })
          this.cityList = cityData
        } else {
          this.error(data)
        }
      })
    },
    getById (data) {
      this.spinShow = true
      getById(data, this.getUrl).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = {
            ...data.data,
            ...this.formItem
          }
          this.spinShow = false
        } else {
          this.error(data)
        }
      })
    },
    saveOption () {
      // 添加机构用户绑定角色的处理
      if (this.optionState === false) {
        let roleList = []
        this.roleList.forEach(item => {
          if (item.state !== undefined) {
            if (item.state === true) {
              roleList.push(item.id)
            }
          }
        })
        this.formItem.rolelist = roleList
      }
      if (this.roleState === true) {
        this.formItem.set_user = true
        this.formItem.login_flag = '1'
      }
      // 保存操作
      this.btnLoading = true
      saveOffice(this.formItem).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.$emit('saveOption', this.formItem, data.data)
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    cancelOption () {
      this.$emit('cancelOption')
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
    formData () {
      this.formItem = this.$common.xeUtils.clone(this.formData)
    }
  }
}
</script>

<style scoped>

</style>
